
<template>
    <div class="nav-body">
        <ul class="nav-parent" v-if="initNav!==undefined">
          <li v-for="item in initNav.nodesLink">
            <p class="nav-title" @click="navNodeShow(item)"><span class="glyphicon glyphicon-folder-open"></span>{{ item.name }}</p>

            <transition
              enter-active-class="animated fadeInLeft"
              leave-active-class="animated fadeOutLeft"
            >
              <ul v-show="item.defaultState" class="nav-children">
                <!-- 没有三级子菜单 -->
                <li v-for="itemNode in item.childrenNodes" v-if="!itemNode.childrenNodes">
                  <router-link :to="itemNode.type" >
                    <span class="glyphicon glyphicon-link"></span>
                    {{ itemNode.name }}
                    <ul class="children-nodes" v-if="itemNode.childrenNodes">
                      <li v-for="itemNodes in itemNode.childrenNodes">
                        <router-link :to="itemNodes.type">
                          <span class="glyphicon glyphicon-link"></span>
                          {{ itemNodes.name }}
                        </router-link>
                      </li>
                    </ul>
                  </router-link>
                </li>
               <!-- 有三级子菜单 click.self组织点击子标签传递到父组件-->
                <li v-for="itemNode in item.childrenNodes"
                    v-if="itemNode.childrenNodes"
                    @click.self="threeShowTag($event)" >
                    <span class="glyphicon glyphicon-link" ></span>
                    {{ itemNode.name }}
                    <ul class="children-nodes" v-if="itemNode.childrenNodes">
                      <!-- <li v-for="itemNodes in itemNode.childrenNodes">
                        {{ itemNodes.title }}
                      </li> -->
                      <li v-for="itemNodes in itemNode.childrenNodes">
                        <router-link :to="itemNodes.type">
                          <span class="glyphicon glyphicon-link"></span>
                          {{ itemNodes.name }}
                        </router-link>
                      </li>
                    </ul>
                </li>
              </ul>
            </transition>

          </li>
        </ul>
    </div>
</template>

<script>
    export default {
      name: "Nav",
      props:{
        initNav:Object
      },
      data(){
        return{
          nodesLink:[
          /*  {
              "thisChildrenShow":true,
              "title":"主页",
              "childrenNodes":[
                {"title":"主页子集","link":"/"},
                {"title":"主页子集","link":"/tableHtml"},
              ]
            }*/
          ]
        }
      },
      methods:{
          navNodeShow:function (show) {
           // //console.log(show);
            show.defaultState = !show.defaultState;
           // //console.log(show.defaultState);
          },
          /**
           * 三级菜单渲染后点击二级菜单展现和隐藏
           * @param e 点击触发的事件
           */
          threeShowTag (e){
            if (e.target.lastChild.style.display != 'block'){
              e.target.lastChild.style.display = 'block'
            }
            else {
              e.target.lastChild.style.display = 'none'
            }
          }

      },
      created(){ //初始化更新
        this.nodesLink = a.nav.nodesLink;
      }
    }
</script>

<style scoped>
  .fadeOutLeft,.fadeInLeft{
    animation-duration: .500s;
  }
</style>
